<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>账号管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-row :gutter="10">
      <el-col :span="5">
        <el-card>
          <div slot="header">
            <span style="font-size: 18px; font-weight: 600">组织架构</span>
          </div>
          <el-tree
            :data="companyTree"
            :props="treeProps"
            node-key="code"
            default-expand-all
            @node-click="nodeClick"
            highlight-current
          >
            <span
              class="custom-tree-node"
              slot-scope="{ node, data }"
              @mouseenter="treeMouseOver($event, data)"
              @mouseleave="treemouseLeave($event, data)"
            >
              <span>
                <i class="el-icon-folder"></i><span> {{ node.label }}</span>
              </span>
              <span class="node-none" @click="getDepartDataById(node.key)">
                <i class="el-icon-edit"></i>
              </span>
            </span>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="19">
        <!-- 列表卡片 -->
        <el-card v-show="showCardName === 'list'">
          <h2 style="margin: 0 0 10px 0">
            {{ defaultDepartment }}（{{ total }}人）
          </h2>
          <!-- 搜索区 -->
          <el-form
            ref="searchFormRef"
            :inline="true"
            :model="queryInfo.query"
            size="mini"
          >
            <el-form-item label="所属部门" prop="department">
              <el-select
                v-model="queryInfo.query.department"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :label="item.name"
                  :value="
                    typeof queryInfo.query.department == 'string'
                      ? item.id + ''
                      : item.id
                  "
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="角色" prop="role_id">
              <el-select
                v-model="queryInfo.query.role_id"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in roles"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select
                v-model="queryInfo.query.status"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option key="1" label="启用" value="1"> </el-option>
                <el-option key="2" label="禁用" value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键字" prop="keywords">
              <el-input
                v-model="queryInfo.query.keywords"
                placeholder="请输入用户名、手机号或姓名"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                class="theme-background-color"
                size="mini"
                @click="searchList"
              >
                搜索
              </el-button>
              <el-button size="mini" @click="resetSearchForm"> 重置 </el-button>
            </el-form-item>
          </el-form>

          <!-- 操作区域 -->
          <div>
            <el-button
              class="theme-background-color"
              icon="el-icon-user"
              size="mini"
              @click="cardSwitch('account')"
            >
              新增用户
            </el-button>
            <el-button
              class="theme-background-color"
              icon="el-icon-s-home"
              size="mini"
              @click="cardSwitch('depart')"
            >
              新建部门
            </el-button>
          </div>

          <!-- 用户列表区域 -->
          <el-table
            :data="accountList"
            border
            stripe
            max-height="500px"
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" fixed></el-table-column>
            <el-table-column
              label="用户名"
              prop="user_name"
              max-width="50"
            ></el-table-column>
            <el-table-column
              label="姓名"
              prop="true_name"
              width="150"
            ></el-table-column>
            <el-table-column
              label="手机号"
              prop="mobile"
              width="150"
            ></el-table-column>
            <el-table-column
              label="所属部门"
              prop="department_name"
              width="150"
            ></el-table-column>
            <el-table-column
              label="角色"
              prop="role_names"
              width="150"
            ></el-table-column>
            <el-table-column label="状态" prop="status" width="60px">
              <template slot-scope="scope">
                <span v-show="scope.row.status == 1">启用</span>
                <span v-show="scope.row.status == 2">禁用</span>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="create_time"
              min-width="90px"
            ></el-table-column>
            <el-table-column
              label="最近一次登录时间"
              prop="last_try"
              min-width="90px"
            ></el-table-column>
            <el-table-column label="操作" width="120px" fixed="right">
              <template slot-scope="scope">
                <el-link
                  type="danger"
                  v-if="scope.row.status === 1"
                  @click="disable(scope.row.uid)"
                >
                  禁用
                </el-link>
                <el-link
                  type="primary"
                  v-if="scope.row.status === 2"
                  @click="enable(scope.row.uid)"
                >
                  启用
                </el-link>
                &nbsp;
                <el-link type="primary" @click="getAccountDataById(scope.row)">
                  编辑
                </el-link>
                &nbsp;
                <el-link type="primary" @click="resetPass(scope.row.uid)">
                  重置密码
                </el-link>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>

          <!-- 重置密码的对话框 -->
          <el-dialog
            title="重置密码"
            :visible.sync="resetPassDialogVisible"
            width="30%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
          >
            <!-- 弹框内容 -->
            <span>是否确认重置密码？</span>

            <!-- 底部区域 -->
            <span slot="footer" class="dialog-footer">
              <el-button @click="resetPassDialogVisible = false"
                >取 消</el-button
              >
              <el-button class="theme-background-color" @click="resetPass">
                确 定
              </el-button>
            </span>
          </el-dialog>

          <!-- 新密码提示框 -->
          <el-dialog
            title="提示"
            :visible.sync="resetPassSuccDialogVisible"
            width="30%"
            :before-close="resetPassSuccDialogClose"
          >
            <div>
              <span>密码重置成功！</span><br />
              <span>初始化密码：{{ newPassword }}</span
              >&nbsp;
              <a
                v-clipboard:copy="newPassword"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
                style="color: #66b1ff; hover: point"
                >复制</a
              >
            </div>
            <span
              slot="footer"
              class="dialog-footer"
              style="text-align: center"
            >
              <el-button
                class="theme-background-color"
                @click="resetPassSuccDialogVisible = false"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </el-card>

        <!-- 新增/编辑用户卡片 -->
        <el-card v-show="showCardName === 'account'">
          <div slot="header">
            <span style="font-size: 18px; font-weight: 600; color: #66b1ff">{{
              editAccount_id === '' ? '新增用户' : '编辑用户'
            }}</span>
          </div>
          <el-form
            :model="accountForm"
            :rules="accountFormRules"
            ref="accountFormRef"
            label-width="100px"
            class="accountForm"
          >
            <el-form-item label="用户名" prop="user_name">
              <el-input v-model="accountForm.user_name"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="true_name">
              <el-input v-model="accountForm.true_name"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
              <el-input v-model="accountForm.mobile"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="accountForm.email"></el-input>
            </el-form-item>
            <el-form-item label="所属部门" prop="department_code">
              <el-select
                v-model="accountForm.department_code"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in departments"
                  :key="item.id"
                  :label="item.name"
                  :value="
                    typeof accountForm.department_code == 'string'
                      ? item.id + ''
                      : item.id
                  "
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="角色" prop="role_ids">
              <el-select
                v-model="accountForm.role_ids"
                placeholder="请选择"
                filterable
                clearable
                multiple
              >
                <el-option
                  v-for="item in roles"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="密码" prop="passwd" v-if="!editAccount_id">
              <el-input v-model="accountForm.passwd" type="password"></el-input>
            </el-form-item>
            <el-form-item
              label="确认密码"
              prop="checkPass"
              v-if="!editAccount_id"
            >
              <el-input
                v-model="accountForm.checkPass"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="cardSwitch('list')"> 取 消 </el-button>
              <el-button class="theme-background-color" @click="saveAccountInfo"
                >保 存</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 新建/编辑部门卡片 -->
        <el-card v-show="showCardName === 'depart'">
          <div slot="header">
            <span style="font-size: 18px; font-weight: 600; color: #66b1ff">{{
              editDepart_id === '' ? '新建部门' : '编辑部门'
            }}</span>
          </div>
          <el-form
            :model="departForm"
            :rules="departFormRules"
            ref="departFormRef"
            label-width="100px"
            class="departForm"
          >
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="departForm.name"></el-input>
            </el-form-item>
            <el-form-item label="部门层级" prop="level">
              <el-select
                v-model="departForm.level"
                :disabled="editDepart_id === '' ? false : true"
                placeholder="请选择"
                @change="selectDepartLevel"
                filterable
                clearable
              >
                <el-option
                  key="2"
                  label="二级部门"
                  :value="typeof departForm.level == 'string' ? 2 + '' : 2"
                >
                </el-option>
                <el-option
                  key="3"
                  label="三级部门"
                  :value="typeof departForm.level == 'string' ? 3 + '' : 3"
                >
                </el-option>
                <el-option
                  key="4"
                  label="四级部门"
                  :value="typeof departForm.level == 'string' ? 4 + '' : 4"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="上级部门" prop="up_code">
              <el-select
                v-model="departForm.up_code"
                placeholder="请选择"
                :disabled="editDepart_id === '' ? false : true"
                filterable
                clearable
              >
                <el-option
                  v-for="item in departmentsadd"
                  :key="item.id"
                  :label="item.name"
                  :value="
                    typeof departForm.up_code == 'string'
                      ? item.id + ''
                      : item.id
                  "
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="departForm.remarks"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="cardSwitch('list')"> 取 消 </el-button>
              <el-button class="theme-background-color" @click="saveDepartInfo"
                >保 存</el-button
              >
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    var checkphone = (rule, value, callback) => {
      const phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!phoneReg.test(value)) {
        // 引入methods中封装的检查手机格式的方法
        callback(new Error('请输入正确的手机号!'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.accountForm.checkPass !== '') {
          this.$refs.accountFormRef.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.accountForm.passwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      firstLoad: true,
      // 组织架构树
      companyTree: [],
      treeProps: {
        children: 'children',
        label: 'name'
      },
      // 获取平台用户列表的参数对象
      queryInfo: {
        query: {
          department: '',
          role_id: '',
          status: '',
          keywords: ''
        },
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 20
      },
      accountList: [],
      total: 0,
      departments: [],
      departmentsadd: [],
      roles: [],

      //   控制重置密码对话框的显示与隐藏
      resetPassDialogVisible: false,

      //   控制新密码提示对话框的显示与隐藏
      resetPassSuccDialogVisible: false,
      newPassword: '',
      // 当前部门
      defaultDepartment: '公司',

      accountForm: {
        user_name: '',
        true_name: '',
        mobile: '',
        email: '',
        department_code: '',
        roleIds: [],
        passwd: '',
        checkPass: ''
      },
      accountFormRules: {
        user_name: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ],
        true_name: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入', trigger: 'blur' },
          { validator: checkphone, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change']
          }
        ],
        department_code: [
          { required: true, message: '请选择', trigger: ['blur', 'change'] }
        ],
        role_ids: [
          {
            type: 'array',
            required: true,
            message: '请选择',
            trigger: ['blur', 'change']
          }
        ],
        passwd: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          },
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { required: true, message: '请输入', trigger: 'blur' },
          {
            min: 6,
            max: 15,
            message: '长度在 6 到 15 个字符',
            trigger: 'blur'
          },
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      // 账号的主键，用于编辑账号
      editAccount_id: '',
      // 右侧默认展示的卡片
      showCardName: 'list',
      // 部门的主键，用于编辑部门
      editDepart_id: '',
      departForm: {
        name: '',
        level: '',
        up_code: '',
        remarks: ''
      },
      departFormRules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '请选择', trigger: ['blur', 'change'] }
        ],
        up_code: [
          { required: true, message: '请选择', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  created() {
    // 获取组织架构树
    this.getCompanyTree()
    // 获取查询下拉框数据
    this.getSelectData()

    this.getListData()
  },
  methods: {
    async getCompanyTree() {
      const { data: res } = await this.$http.get('/admin/department/getTree')

      if (res.meta.status !== 200) {
        return this.$message.error('获取组织架构失败！')
      }
      this.companyTree = res.data
    },
    async getSelectData() {
      const { data: dep } = await this.$http.post('/admin/data/find', {
        code: 'department,role'
      })

      if (dep.meta.status !== 200) {
        return this.$message.error('获取下拉数据失败！')
      }
      this.departments = dep.data.department
      this.departmentsadd = dep.data.department
      this.roles = dep.data.role
    },
    async selectDepartLevel(val) {
      const { data: dep } = await this.$http.post('/admin/data/find', {
        code: 'department',
        level: val - 1
      })

      if (dep.meta.status !== 200) {
        return this.$message.error('获取下拉数据失败！')
      }
      this.departmentsadd = dep.data.department
    },

    async getListData() {
      // 返回数据重命名为res
      const { data: res } = await this.$http.post(
        'admin/user/list',
        this.queryInfo
      )
      // console.log(res)
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg)
      }
      this.accountList = res.data.list
      this.total = res.data.total
    },
    searchList() {
      this.queryInfo.pagenum = 1
      this.getListData()
    },
    resetSearchForm() {
      this.$refs.searchFormRef.resetFields()
      this.getListData()
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      // console.log(newSize)
      this.queryInfo.pagesize = newSize
      this.getListData()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      // console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getListData()
    },
    async disable(id) {
      // 弹框询问是否禁用用户
      const confirmResult = await this.$confirm(
        '禁用后将无法登陆及使用系统，是否确认禁用该用户？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消操作')
      }
      // const { data: res } = await this.$http.post(
      //   'removeProductById', {
      //   idi : id
      // }
      // )
      const { data: res } = await this.$http.post('admin/user/active', {
        // 当前的页数
        uid: id
      })
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg)
      }
      this.$message.success(res.meta.msg)
      this.getListData()
    },
    async enable(id) {
      // 弹框询问是否启用用户
      const confirmResult = await this.$confirm(
        '是否确认启用该用户？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消操作')
      }
      // const { data: res } = await this.$http.post(
      //   'removeProductById', {
      //   idi : id
      // }
      // )
      const { data: res } = await this.$http.post('admin/user/active', {
        // 当前的页数
        uid: id
      })
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg)
      }
      this.$message.success(res.meta.msg)
      this.getListData()
    },
    showResetPassDialog(id) {
      this.resetPassDialogVisible = true
    },
    async resetPass(id) {
      // 弹框询问是否启用用户
      const confirmResult = await this.$confirm(
        '是否确认重置密码？',
        '重置密码',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消操作')
      }
      // const { data: res } = await this.$http.post(
      //   'removeProductById', {
      //   idi : id
      // }
      // )
      const { data: res } = await this.$http.post('admin/user/reset', {
        // 当前的页数
        uid: id
      })
      if (res.meta.status !== 200) {
        this.$message.error(res.meta.msg)
      }
      this.newPassword = res.data
      this.resetPassSuccDialogVisible = true
    },
    resetPassSuccDialogClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    onCopy: function (e) {
      this.$message.success('新密码复制成功')
    },
    onError: function (e) {
      this.$message.error('新密码复制失败')
    },
    nodeClick(obj, node, data) {
      console.log(node)
      this.defaultDepartment = node.label
      this.queryInfo.query.department = node.key
      this.getListData()
      this.showCardName = 'list'
    },
    saveAccountInfo() {
      this.$refs.accountFormRef.validate(async (valid) => {
        if (!valid) return
        // 新增的请求
        // const { data: res } = await this.$http.post(
        //   'addProduct',
        //   this.addForm
        // )
        // 修改的请求
        // const { data: res } = await this.$http.put(
        //   'addProduct/' + this.$route.query.id,
        //   this.addForm
        // )
        console.log(this.accountForm)
        var url = ''
        if (this.editAccount_id === '') {
          url = '/admin/user/add'
        } else {
          this.accountForm.uid = this.editAccount_id
          url = '/admin/user/edit'
        }
        const { data: res } = await this.$http.post(url, this.accountForm)

        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.$message.success(res.meta.msg)
        this.getListData()
        this.showCardName = 'list'
      })
    },
    async getAccountDataById(data) {
      this.accountForm = { ...data }
      this.accountForm.role_names = this.accountForm.role_names.split(',')
      this.accountForm.role_ids = this.accountForm.role_ids.split(',')
      for (let index = 0; index < this.accountForm.role_ids.length; index++) {
        this.accountForm.role_ids[index] = parseInt(
          this.accountForm.role_ids[index]
        )
      }
      this.editAccount_id = data.uid
      this.showCardName = 'account'
    },
    // 根据传入的卡片名，控制显示
    cardSwitch(name) {
      this.clearAllForm()
      this.showCardName = name
    },
    // 清除表单的内容
    clearAllForm() {
      this.editAccount_id = ''
      this.accountForm = {
        user_name: '',
        true_name: '',
        mobile: '',
        email: '',
        departmentCode: '',
        role_ids: [],
        passwd: '',
        checkPass: ''
      }
      this.$refs.accountFormRef.resetFields()
      this.departForm = {
        name: '',
        level: '',
        up_code: '',
        remarks: ''
      }
      this.editDepart_id = ''
      this.$refs.departFormRef.resetFields()
    },
    saveDepartInfo() {
      this.$refs.departFormRef.validate(async (valid) => {
        if (!valid) return
        // 新增的请求
        // const { data: res } = await this.$http.post(
        //   'addProduct',
        //   this.addForm
        // )
        // 修改的请求
        // const { data: res } = await this.$http.put(
        //   'addProduct/' + this.$route.query.id,
        //   this.addForm
        // )
        var url = ''
        if (this.editDepart_id === '') {
          url = '/admin/department/add'
        } else {
          this.departForm.code = this.editDepart_id
          url = '/admin/department/edit'
        }
        const { data: res } = await this.$http.post(url, this.departForm)

        if (res.meta.status !== 201) {
          this.$message.error(res.meta.msg)
        }
        this.$message.success(res.meta.msg)

        // 更新组织架构树
        this.getCompanyTree()
        // 更新列表
        this.getListData()
        this.showCardName = 'list'
      })
    },
    // 鼠标移入移出事件
    treeMouseOver(e, data) {
      if (e.target.lastElementChild) {
        // 鼠标移入移出要做个判断，鼠标是否在树节点上，如果在才赋值，不在就不要赋值，否则会一直报错
        e.target.lastElementChild.setAttribute('class', 'node-block') // 设置显示样式
      }
    },
    treemouseLeave(e, data) {
      if (e.target.lastElementChild) {
        e.target.lastElementChild.setAttribute('class', 'node-none') // 设置隐藏样式
      }
    },
    async getDepartDataById(id) {
      this.editDepart_id = id

      const { data: res } = await this.$http.post(
        '/admin/department/list',
        { code: id }
        // ,this.editAccount_id
      )
      if (res.meta.status !== 200) {
        return this.$message.error('查询部门信息失败')
      }
      this.departForm = res.data.list[0]
      var c = this.departForm.code.indexOf('00')

      if (c === -1) c = 6

      this.departForm.up_code = this.departForm.code
        .slice(0, c - 2)
        .padEnd(6, 0)
      console.log(this.departForm)

      this.showCardName = 'depart'
    }
  }
}
</script>

<style lang="less" scoped>
.accountForm,
.departForm {
  width: 500px;

  .el-select,
  .el-date-editor {
    width: 400px !important;
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.node-none {
  display: none;
}
.node-block {
  display: inline;
}
</style>
